<template>
  <uploader
    ref="uploader"
    :options="options"
    :auto-start="false"
    class="uploader-app"
    @file-added="onFileAdded"
    @file-success="onFileSuccess"
    @file-progress="onFileProgress"
    @file-complete="onComplete"
    @file-error="onFileError"
  >
    <!-- <uploader-unsupport /> -->

    <uploader-btn
      id="global-uploader-btn"
      ref="uploadBtn"
      :directory="directory"
    >选择文件</uploader-btn>
    <uploader-list />
  </uploader>
</template>

<script>
export default {
  name: 'Hamburger',
  props: {
    directory: {
      type: Boolean,
      default: false
    },
    onFileAdded: {
      type: Function,
      default: function(file) {
        console.log(file)
      }
    },
    onQuery: {
      type: Function,
      default: function(File, Chunk, isTest) {
        console.log(File, Chunk, isTest)
        console.log('=====================================================')
      }
    }
  },
  data() {
    return {
      options: {
        target: '', // 目标上传 URL
        chunkSize: 10240 * 1024 * 1024, // 分块大小
        fileParameterName: 'file', // 上传文件时文件的参数名，默认file
        maxChunkRetries: 3, // 最大自动失败重试上传次数
        testChunks: false, // 是否开启服务器分片校验
        query: this.onQuery
      }
    }
  },
  methods: {
    getThumbnail(file) {
      return URL.createObjectURL(file.file)
    },
    addFile() {
      this.$refs.uploadBtn.$refs.btn.click()
    },
    onFileSuccess(rootFile, file, response, chunk) {
      console.log(file)
    },
    onFileProgress(rootFile, file, chunk) {
      console.log(rootFile)
      console.log(file)
      console.log(chunk)
    },
    onFileError(rootFile, file, response, chunk) {
      console.log(file)
    }
  }
}
</script>

<style lang="scss" >
.uploader-app {
  position: fixed !important;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 200px;
  z-index: 999;
  background-color: #fff;
  border: 1px dashed #d9d9d9;

  // .file-list {
  //   padding: 0;
  // }
  // .uploader-btn,
  // .file {
  //   list-style: none;
  //   font-size: 28px;
  //   color: #8c939d;
  //   width: 178px;
  //   height: 178px;
  //   line-height: 178px;
  //   text-align: center;
  // }
  // .file:hover {
  //   border-color: #409eff;
  // }
}
</style>
